import React ,{Component} from 'react';
import {withRouter,Link} from 'react-router-dom';
import $ from 'jquery';
// 引入echarts主模块
import echarts from 'echarts/lib/echarts';
// 引入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
  // 引入样式
import '../../static/bigScreen/bigScreen.less';
import u from '../../common.js'


let dateFormate=(timestamp)=>{
  let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  let D = date.getDate() <10? '0'+date.getDate():date.getDate();
  return Y+M+D;
}

export default class BigScreen extends React.Component{
  constructor(props){
    super(props)
    this.state={
      totalNum:'',//采集总量
      sentiment:'',//舆情
      case:'',//案件
      intelligence:'',//情报
      proportion1:'',
      proportion2:'',
      proportion3:'',
      carrierState:[],
      realtime:[],
      colors1: ['#464fb4', '#5b67ea', '#4ee5be', '#2c47ef', '#449cca', '#55c3fc', '#111b4f','#F56767'],
      week:'8%',
      day:'2%'
    }
  }


  analysis=async()=>{
    let myChart1 = echarts.init(window.document.getElementById('proportion_bar'));
    let myChart2 = echarts.init(window.document.getElementById('carrier_bar'));
    let myChart3=echarts.init(window.document.getElementById('line_chart'));
  
 
    //各类目占比情况
    u.dataStatistics({
      aggsType:"terms",
      aggsField:"judgeType",
      judgeType:'all',
      aggsSize:20,
      size:0,
    }, data => {
      // console.log(data);
      let sum=data.total;
      // console.log(data.aggs[0].count/sum);
      let num1=parseInt(data.aggs[0].count/sum*100);
      let num2=parseInt(data.aggs[1].count/sum*100);
      let num3=parseInt(data.aggs[2].count/sum*100);
      this.setState({
        proportion1:num1,
        proportion2:num2,
        proportion3:num3,
      },()=>{
        this.proportion_bar();
      })
    });

   // 载体分布情况
   u.dataStatistics({    
    aggsType:"terms",
    aggsField:"webSiteType",
    aggsSize:20,
    size:0,
  }, data => {
    // console.log(data);
    let num=[],type=[],sum=[],sumName=[]
      for(let i=0;i<data.aggs.length;i++){
        num.push(data.aggs[i].count);
        switch (data.aggs[i].key){
          case "0":
            type.push("新闻");
            break;
          case "1":
            type.push("论坛");
            break;
          case "2":
            type.push("微博");
            break;
          case "3":
            type.push("平面媒体");
            break;
          case "5":
            type.push("博客");
            break;
          case "6":
            type.push("贴吧");
            break;
          case "7":
            type.push("其他");
            break;
          case "9":
            type.push("twitter");
            break;
          case "10":
            type.push("微信");
            break;
          case "11":
            type.push("招标");
            break;
          case "13":
            type.push("藏文");
            break;
          case "14":
            type.push("公众号");
            break;
          default:
            type.push("未知");
            break;
        }
      }
      for(let i=0;i<type.length;i++){
        sum.push({value:num[i],name:type[i]})
        sumName.push(type[i])
      }
    this.setState({
      carrierState:sum
    },()=>{
      this.carrier_bar();
    })
  }); 


  //底部折线图情况
  u.dataStatistics({
    "startTime":"2018-09-12 00:00:00",
    "endTime":"2018-09-20 00:00:00",
    aggsType:"terms",
    aggsField:"judgeType",
    aggsSize:20,
    size:0,
  }, data => {
    this.setState({

    },()=>{
      this.line_chart();
    })
  });

  //实时情报
  u.queryList({
    judgeType:'all',
  },data=>{
    // console.log(data);
    let datainfor=data.data;
    let news=[];
    for(let i=0;i<datainfor.length;i++){
       // 取出title以及time,push到数值中，并将时间格式化
    news.push({index:i,title:datainfor[i].title,time:dateFormate(datainfor[i].addTime)})
    }
    this.setState({
      realtime:news,
    })
  })
  }


// 各类目占比图
proportion_bar=async()=>{
  let myChart1 = echarts.init(window.document.getElementById('proportion_bar'));
  myChart1.setOption(
    {
      title: [{
          text: this.state.proportion1+'%',
          x: '4%',
          y: '20%',
          textStyle: {
              fontWeight: 'normal',
              color: '#fff',
              fontSize: '18'
          }
        },
        {
          text: this.state.proportion2+'%',
          x: '39%',
          y: '20%',
          textStyle: {
              fontWeight: 'normal',
              color: '#fff',
              fontSize: '18'
        }
      },
      {
          text: this.state.proportion3+'%',
          x: '80%',
          y: '20%',
          textStyle: {
              fontWeight: 'normal',
              color: '#fff',
              fontSize: '18'
        }
      }
        ],
      legend: [{
          x:'3%',
          y:'40%',
          data: ['舆情'],
          top: 100,
          selectedMode: false,
          textStyle: {
              color: '#6f87d6',
              fontSize: '14'
          },
          itemWidth:0,
          itemHeight:0
      },
      {
        data: ['案件'],
          top: 100,
          selectedMode: false,
          textStyle: {
              color: '#6f87d6',
              fontSize: '14'
          },
          itemWidth:0,
          itemHeight:0
      },
      {
          x:'84%',
          y:'30%',
          data: ['情报'],
          top: 100,
          selectedMode: false,
          textStyle: {
              color: '#6f87d6',
              fontSize: '14'
          },
          itemWidth:0,
          itemHeight:0
      }
    ],
      series: [
        // 图一
        {
          type: 'pie',
          radius: ['40%', '50%'],
          center:['10%', '30%'],
          itemStyle: {
              normal: {
                  label: {
                      show: false
                  }
              }
          },
          data: [{
              name: '01',
              value: this.state.proportion1,
              itemStyle: {
                  normal: {
                      color:  '#5b67ea',
                  } 
              }
          }, { 
              name: '02',
              value: 100-(this.state.proportion1),
              itemStyle: {
                  normal: {
                    color: '#0b1131'
                  } 
              }
          },{
            name:'舆情',
          }]
      },
      // 图二
      {
          type: 'pie',
          radius: ['40%', '50%'],
          center:['45%','30%'],
          itemStyle: {
              normal: {
                  label: {
                      show: false
                  }
              }
          },
          data: [{
              name: '01',
              value: this.state.proportion2,
              itemStyle: {
                  normal: {
                      color:  '#55c3fc',
                  } 
              }
          }, { 
              name: '02',
              value: 100-(this.state.proportion2),
              itemStyle: {
                  normal: {
                    color: '#0b1131'
                  } 
              }
          },{
            name:'案件',
          }]
      },
      // 图三
      {
          type: 'pie',
          radius: ['40%', '50%'],
          center:['85%','30%'],
          itemStyle: {
              normal: {
                  label: {
                      show: false
                  }
              }
          },
          data: [{
              name: '01',
              value:100-(this.state.proportion3),
              itemStyle: {
                  normal: {
                      color:  '#4ee5be',
                  } 
              }
          }, { 
              name: '02',
              value: 100-(this.state.proportion3),
              itemStyle: {
                  normal: {
                    color: '#0b1131'
                  } 
              }
          },{
            name:'情报',
          }]
      }
      ]
    }
  
  );
  window.onresize = myChart1.resize;
}

// 载体分布图
carrier_bar=async()=>{
  let myChart2 = echarts.init(document.getElementById('carrier_bar'));
  myChart2.setOption(
    {
      tooltip: {
        show: false
      },
      series: [{
        type: 'pie',
        center: ['50%', '22%'],
        radius: ['30%', '50%'],
        roseType: 'area',
        zlevel: 2,
        tooltip: {
          formatter: '{b}: {d}%'
        },
        label: {
          normal: {
            textStyle:{
              color:'#fff',
              fontSize:'10'
            },
            show: 'true',
            formatter: '\n{d}%'
          }
        },
        labelLine: {
          normal: {
              lineStyle: {
                  color: '#2065d7'
              }
          }
      },
        data: this.state.carrierState
      }, {
        type: "pie",
        radius: [20, 30],
        color:'#696d7d',
        itemStyle: {
          normal: {
            label: {
              position: "inside"
            },
          }
        },
        data: [{
          value: 100,
        }],
        center: ["50%", "22%"],
        roseType: "radius"
      }, ]
    }
  );
  window.onresize = myChart2.resize;
}
// 底部折线图
line_chart=async()=>{
  let myChart3=echarts.init(document.getElementById('line_chart'));
  myChart3.setOption({
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: [{
        name: '舆情',
        icon: 'rect',
      }, {
        name: '案件',
        icon: 'rect',
      }, {
        name: '情报',
        icon: 'rect',
      }],
      right: '9%',
      padding: 20,
      itemGap: 30,
      textStyle: {
        color: "#fff",
        fontSize: 14
      }
    },
    toolbox: {
      show: false,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: true
        },
        magicType: {
          show: false,
          type: ["line", "bar", "stack", "tiled"]
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    xAxis: [{
      type: "category",
      boundaryGap: false,
      data: ["10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30"],
      axisLine: {
        lineStyle: {
          color: "#233d5a",
          width: 1
        }
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff",
          fontStyle: "normal"
        }
      },
      axisTick: {
        show: false,
        interval: 20,
        inside: false
      },
      splitLine: {
        show: false
      }
    }],
    yAxis: [{
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#233d5a",
          width: 1,
          type: "solid"
        }
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontStyle: "normal"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#233d5a",
          width: 1,
          type: "dashed"
        }
      },
      axisTick: {
        show: false,
        interval: 20,
        inside: false
      },
    }],
    series: [{
        name: "舆情",
        type: "line",
        smooth: true,
        data: [32, 33, 40, 45, 30, 15, 10, 10, 10, 10],
        symbolSize: 0,
        itemStyle: {
          normal: {
            lineStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(91,103,234,0.2)'
              }, {
                offset: 0.5,
                color: 'rgba(91,103,234,1)'
              }, {
                offset: 1,
                color: 'rgba(91,103,234,0.2)'
              }]),
              width: 3,
              type: "solid"
            }
          }
        },
      },
      {
        name: "案件",
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(85,195,252,0.2)'
              }, {
                offset: 0.5,
                color: 'rgba(85,195,252,1'
              }, {
                offset: 1,
                color: 'rgba(85,195,252,0.2)'
              }]),
              width: 3,
              type: "solid"
            }
          }
        },
        data: [5, 18, 28, 29, 23, 23, 24, 26, 32, 45],
        symbolSize: 0
      },
      {
        name: "情报",
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(78,229,190,0.2)'
              }, {
                offset: 0.5,
                color: 'rgba(78,229,190,1)'
              }, {
                offset: 1,
                color: 'rgba(78,229,190,0.2)'
              }]),
              type: "solid",
              width: 3
            }
          }
        },
        data: [5, 18, 28, 29, 8, 5, 8, 15, 20, 15],
        symbolSize: 0
      }
    ],
    color: ['#5763e2', '#52bcf4', '#4bdcb8']
  })
  window.onresize = myChart3.resize;
}
//定时器控制周同比和日环比
handleClick=()=>{
let weekRatio=['8%','10%','11%','6%','5%','12%'];
let dayRatio=['2%','8%','12%','7%','9%','6%']
weekRatio[parseInt(Math.random()*6)]
setInterval(()=>{
this.setState({
  week:weekRatio[parseInt(Math.random()*6)],
  day:weekRatio[parseInt(Math.random()*6)]
})
},10000)
}

componentDidMount(){
  this.proportion_bar();
  this.carrier_bar();
  this.line_chart();
  this.analysis();
  this.handleClick();
  u.dataStatistics({
    judgeType:'all',
    aggsType:"terms",
    aggsField:"judgeType",
    aggsSize:20,
    size:0,
  },data=>{
    this.setState({
      totalNum:data.total,//采集总量
      sentiment:data.aggs[0].count,//舆情
      case:data.aggs[1].count,//案件
      intelligence:data.aggs[2].count//情报
      
    })
   
  })

  
 }


  render(){

    return (
      <div className='contaninerBs'>
        <div className='top_bs' >
         <img src={require('../../static/image/top_bs.png')} 
              style={{width:'100%',height:"100%",top:"0px"}}
          alt=""/>
          <div className='title_bs'>
          <span>西藏开源信息情报监测平台</span>
          <p>བོད་ལྗོངས་ཀྱི་སྤྱི་བསྒྲགས་ཆ་འཕྲིན་གསང་འཕྲིན་ལྟ་ཞིབ་ཚད་ལེན་བྱེད་པའི་སྟེགས་བུ།</p>
          </div>
        </div>
        {/* 左边 */}
        <div className='left_bs'>
          {/* 今日采集总量 */}
          <div className='total_bs'>
            <div className='line_one'>今日采集总量</div>
            <span className='number'>{this.state.totalNum}</span>
            <div className='total_bottom'>
              <div className='week_bs'>
                <span className='week'>周同比</span>
                <img src={require('../../static/image/green.png')}
                  style={{marginRight:'6px',width:'10px',height:'5px'}}
                alt=""/>
                <span>{this.state.week}</span>
              </div>
            
            <div className='day_bs'>
            <span className='day'>日环比</span>
                <img src={require('../../static/image/red.png')}
                  style={{marginRight:'5px',width:'10px',height:'5px'}}
                alt=""/>
                <span>{this.state.day}</span>
            </div>

            </div>
          </div>
          {/* 各类目占比 */}
          <div className='proportion'>
            <div className='line_two'>各类目占比</div>
            <div id='proportion_bar' style={{width: '380px',
          height: '138px',marginLeft:'31px'}}></div>
          </div>
          {/* 载体分布 */}
          <div className='carrier'>
          <div className='line_tress'>载体分布</div>
          <div id='carrier_bar' style={{width: '313px',
          height: '394px',marginLeft:'31px'}}></div>
           <div className="carrier-legend">
            {
              this.state.carrierState.length>0?
                <ul>
                  {
                    this.state.carrierState.map((item, i) => {
                      return <li key={i}>
                        <span className="legendColor" style={{backgroundColor: this.state.colors1[i]}}> </span>
                        <span className="legendName">{item.name}</span>
                        <span className="legendValue">{item.value}条</span>
                      </li>
                    })
                  }
                </ul> : " "
            }
          </div>
          </div>
        </div>
        {/* 中间地球部分 */}
        <div className='earth'></div>
        {/* 底部折线图 */}
        <div className='bottom_bs'>
        <div className='line_six'>信息采集分布情况</div>
        <div id='line_chart'></div>
        </div>
        
        {/* 右边 */}
        <div className='rigth_bs'>
        {/* 实时情报 */}
        <div className='right_top'>
          <div className='line_four'>实时情报</div>
          <ul className='rigth_data'>
          {this.state.realtime.map((item,index)=>{
            return(<li key={index}>
              
             <span className={index<3?'bg':''}>{item.index+1}</span>
             <span>{item.title}</span>
             <span>{item.time}</span>
           </li>)
          })}
          </ul>
        
        </div>
        {/* 热门搜索 */}
        <div className='right_bottom'>
        <div className='line_five'>热门搜索</div>
        <div className='right_search'>
          <div className='circle1_bs' style={{position:'absolute',top:'4%',left:'44%'}}>
          <img src={require('../../static/image/quan/circle1_bs.png')} 
               style={{width:'100%',height:'100%'}}
          alt="" />
          <p  className="circleText" style={{top:'40%',left:'36%'}}>西藏</p>
          </div>
          <div className='circle2_bs' style={{position:'absolute',top:'18%',left:'70%'}}>
          <img src={require('../../static/image/quan/circle2_bs.png')} 
               style={{width:'100%',height:'100%'}}
          alt="" /> 
          <p  className="circleText"  style={{top:'37%',left:'34%'}}>政府</p>
          </div>

          <div className='circle3_bs' style={{position:'absolute',top:'18%',left:'23%'}}>
          <img src={require('../../static/image/quan/circle3_bs.png')} 
              style={{width:'100%',height:'100%'}}
          alt="" /> 
          <p  className="circleText" >藏文</p>
          </div>

          <div className='circle4_bs' style={{position:'absolute',top:'37%',left:'38%'}}>
          <img src={require('../../static/image/quan/circle4_bs.png')} 
             style={{width:'100%',height:'100%'}}
          alt="" /> 
          <p  className="circleText" style={{top:'37%',left:'34%'}}>情报</p>
          </div>

          <div className='circle5_bs' style={{position:'absolute',top:'36%',right:'28%'}}>
          <img src={require('../../static/image/quan/circle5_bs.png')} 
               style={{width:'100%',height:'100%'}}
          alt="" /> 
          <p  className="circleText" style={{top:'35%',left:'26%'}}>案件</p>
          </div>

           <div className='circle6_bs' style={{position:'absolute',top:'48%',right:'10%'}}>
          <img src={require('../../static/image/quan/circle6_bs.png')} 
              style={{width:'100%',height:'100%'}}
          alt="" /> 
          </div>

          <div className='circle7_bs' style={{position:'absolute',top:'45%',left:'30%'}}>
          <img src={require('../../static/image/quan/circle7_bs.png')} 
               style={{width:'100%',height:'100%'}}
          alt="" /> 
          </div>

          <div className='circle8_bs' style={{position:'absolute',top:'3%',left:'30%'}}>
          <img src={require('../../static/image/quan/circle8_bs.png')} 
              style={{width:'100%',height:'100%'}}
          alt="" /> 
          <p  className="circleText" style={{top:'25%',left:'32%'}}>高</p>
          </div>

          <div className='circle9_bs' style={{position:'absolute',top:'55%',right:'35%'}}>
          <img src={require('../../static/image/quan/circle6_bs.png')} 
              style={{width:'100%',height:'100%'}}
          alt="" /> 
          </div>

          <div className='circle10_bs' style={{position:'absolute',top:'55%',left:'20%'}}>
          <img src={require('../../static/image/quan/circle6_bs.png')} 
              style={{width:'100%',height:'100%'}}
          alt="" /> 
          </div>
        </div>
        </div>
        </div>

      </div>
    )
  }

}


